<template>
  <!-- start:自定义页面内容 -->
  <div>
    <el-card class="box-card">
      <el-image :src="readingUrl"></el-image>
    </el-card>
  </div>
  <!-- end:自定义页面内容 -->
</template>

<script>
import { MessageBox } from "element-ui";
import { FourInOneReader, IdInfo } from "@api/tools/Hardware.js";

export default {
  name: "Sfzdkhd",
  data() {
    return {
      cardNo: "",
      readingUrl:this.loginUrl, //刷卡图标
      idReader: new FourInOneReader(),
      idInfo: new IdInfo()
    };
  },
    props:{
    loginUrl:String,
  },
  methods: {
    ReadedCard(data) {
      this.$emit("ReadedIdInfo", data);
    },
    async BeginReadID() {
      console.log("%c BeginReadeID", "color:#01DFA5");
      if (this.destroyed) {
        return; // 防止页面关闭后 继续调用
      }
      ///////////////////////////// 异步写法
      try {
        /** 读身份证 */
        await this.idReader.Open();
        let info = await this.idReader.Read();
        if (info.ID != "") {
          console.log("info=" + info);
          this.idInfo = info;
          this.ReadedCard(info);
        } else {
          this.timerhandle = setTimeout(() => this.BeginReadID(), 2000);
        }
      } catch (e) {
        console.log(`%c error: ${e.message}`, "color:red");
        MessageBox.alert(e.message, {
          confirmButtonText: "确定",
          callback: action => {
            setTimeout(() => {
              this.$router.push({ name: "home" });
            }, 500);
          }
        });
      }
    },
    async Initynk() {
      await this.ynkReader.Init(0x04, "FFFFFFFFFFFF");
      console.log("set成功");
    }
  },
  mounted() {
   this.idReader.Open()
    .then(()=>this.BeginReadID())
    .catch(e=>{
      MessageBox.alert(e.message, {
        confirmButtonText: "确定",
        callback: action => {
          setTimeout(() => {
            this.$router.push({ name: "home" });
          }, 500);
        }
      });
    });
  },
    beforeDestroy() {
     this.idReader.Close();
    if(this.timerhandle != null) {
      clearTimeout(this.timerhandle);
      this.timerhandle = null;
    }
    this.destroyed = true;
  }
};
</script>

<style scoped>
</style>
